<template>
	  <view v-if="Object.keys(goods).length !== 0" class="base-info">
	    <view class="info-title">{{goods.title}}</view>
	    <view class="info-price">
	      <text class="n-price">{{goods.newPrice}}</text>
	      <text class="o-price">{{goods.oldPrice}}</text>
	      <text v-if="goods.discount" class="discount">{{goods.discount}}</text>
	    </view>
	    <view class="info-other">
	      <text>{{goods.columns[0]}}</text>
	      <text>{{goods.columns[1]}}</text>
	      <text>{{goods.services[goods.services.length-1].name}}</text>
	    </view>
	    <view class="info-service">
	      <view class="info-service-item" v-for="index in goods.services.length" :key="index">
			<image :src="goods.services[index-1].icon"></image>
	        <text>{{goods.services[index-1].name}}</text>
	      </view>
	    </view>
	  </view>
</template>

<script>
	export default {
		props: {
			goods: {
			type: Object,
		  }
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
  .base-info {
    margin-top: 30rpx;
    padding: 0 16rpx;
    color: #999;
    border-bottom: 10rpx solid #f2f5f8;
  }
  .info-title {
    color: #222
  }
  .info-price {
    margin-top: 20rpx;
  }
  .info-price .n-price {
    font-size: 48rpx;
    color: var(--color-high-text);
  }
  .info-price .o-price {
    font-size: 26rpx;
    margin-left: 10rpx;
    text-decoration: line-through;
  }
  .info-price .discount {
    font-size: 24rpx;
    padding: 4rpx 10rpx;
    color: #fff;
    background-color: var(--color-high-text);
    border-radius: 16rpx;
    margin-left: 10rpx;

    /*让元素上浮一些: 使用相对定位即可*/
    position: relative;
    top: -16rpx;
  }
  .info-other {
    margin-top: 30rpx;
    line-height: 60rpx;
    display: flex;
    font-size: 26rpx;
    border-bottom: 2rpx solid rgba(100,100,100,.1);
    justify-content: space-between;
  }
  .info-service {
    display: flex;
    justify-content: space-between;
    line-height: 120rpx;
  }
  .info-service-item image {
    width: 28rpx;
    height: 28rpx;
    position: relative;
    top: 4rpx;
  }
  .info-service-item text {
    font-size: 26rpx;
    color: #333;
  }
</style>
